<template>
  <view class="m-con">
    <view class="m-box">
      <view class="m-item" :class="index==mIndex?'active':''" v-for="(item,index) in 12" @tap="handleChangeMonth(item,index)" :key="index">{{ parseInt(index+1) }}月</view>
    </view>
    <view class="tj-box">
      <view class="tj-item" :class="info&&info.average_workhour.value==0?'no':''">
        <view class="title">{{ info?info.average_workhour.value:0 }}</view>
        <view class="desc">平均工時</view>
      </view>
      <view class="tj-item" :class="info&&info.attendance_days.value==0?'no':''">
        <view class="title">{{ info?info.attendance_days.value:0 }}</view>
        <view class="desc">出勤天數</view>
      </view>
      <view class="tj-item" :class="info&&info.holiday.value==0?'no':''">
        <view class="title">{{ info?info.holiday.value:0 }}</view>
        <view class="desc">休息天數</view>
      </view>
      <view class="tj-item" :class="info&&info.chidao.value==0?'no':''">
        <view class="title">{{ info?info.chidao.value:0 }}</view>
        <view class="desc">遲到</view>
      </view>
      <view class="tj-item" :class="info&&info.zaotui.value==0?'no':''">
        <view class="title">{{ info?info.zaotui.value:0 }}</view>
        <view class="desc">早退</view>
      </view>
      <view class="tj-item" :class="info&&info.miss_card.value==0?'no':''">
        <view class="title">{{ info?info.miss_card.value:0 }}</view>
        <view class="desc">缺卡</view>
      </view>
      <view class="tj-item" :class="info&&info.waiqin.value==0?'no':''">
        <view class="title">{{ info?info.waiqin.value:0 }}</view>
        <view class="desc">外勤</view>
      </view>
      <view class="tj-item" :class="info&&info.ask_leave.value==0?'no':''">
        <view class="title">{{ info?info.ask_leave.value:0 }}</view>
        <view class="desc">請假</view>
      </view>
    </view>
    <view class="d-footer" @tap="jumpPages()">
      查看详情
    </view>
  </view>
</template>
<script>
import { min } from 'moment';
import {attendanceStatistics} from '../../../utils/userApi'
export default {
  data() {
    return {
      mIndex:0,
      info:null,
    }
  },
  props:{
    year:{
      type:String,
      default:'',
    }
  },
  created(){
    this.mIndex=parseInt(this.$moment().format('MM')-1)
    this.computedDate(this.$moment().format('YYYY-MM'))
  },
  methods:{
    jumpPages(){
      uni.navigateTo({ url: '/pages/boss/statistics' })
    },
    handleChangeMonth(item,index){
      this.mIndex=index
      let ym=`${this.year}-${item}`
      this.computedDate(ym)
    },
    computedDate(month){
      let newDate=new Date(month)
      let start=this.$moment(newDate).format('YYYY-MM-DD')
      let endDate=new Date(month)
      endDate.setMonth(newDate.getMonth()+1)
      endDate.setDate(0)
      let end=this.$moment(endDate).format('YYYY-MM-DD')
      this.getData(start,end)
    },
    async getData(start,end){
      let res=await attendanceStatistics({start_date:start,end_date:end})
      if(res.code==1){
        this.info=res.data
      }else{
        uni.showToast({
          icon:'none',
          title: '系統異常'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.m-box{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.m-item{
  width: 32px;
  height: 32px;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 32px;
  text-align: center;
  margin: 4px 10px;
}
.m-item.active{
  border-radius: 50%;
  color: #fff;
  background: #1C7AF7;
}
.tj-box{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 20px;
}
.tj-item{
  width: 33.33%;
  height: 70px;
  text-align: center;
}
.title{
  height: 24px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 800;
  font-size: 24px;
  color: #333333;
  line-height: 36px;
}
.desc{
  height: 18px;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  padding: 10px 0;
}
.tj-item.no{
  .desc{
    color: #B9B9B9;
  }
  .title{
    color: #B9B9B9;
  }
}
.d-footer{
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 14px;
  color: #666666;
  border-top: 0.5px solid #E1E1E1;
}
</style>